<!-- 继承模板 -->
@extends('Admin/Layout/base')

<!-- 标题设置 -->
@section('title', '标签列表')

@section('style')
    <!-- 加载ueditor -->
    @include('vendor.ueditor.assets')
@endsection

{{-- 内容区域 --}}
@section('content')



<div class="row-content am-cf">

    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">标签列表</div>
                </div>
                <div class="widget-body  am-fr">

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button" class="am-btn am-btn-default am-btn-success" id="create-tag">
                                        <a href="javascript:;" style="color: white;width:100%;height: 100%">
                                            <span class="am-icon-plus"></span>  
                                             新增
                                        </a>       
                                     </button>
                                    {{-- <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="am-form-group tpl-table-list-select">
                            <select data-am-selected="{btnSize: 'sm'}">
                                <option value="option1">所有类别</option>
                                <option value="option2">IT业界</option>
                                <option value="option3">数码产品</option>
                                <option value="option3">笔记本电脑</option>
                                <option value="option3">平板电脑</option>
                                <option value="option3">只能手机</option>
                                <option value="option3">超极本</option>
                            </select>
                        </div>
                    </div> --}}
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                        <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                            <input type="text" class="am-form-field " placeholder="搜索标签">
                            <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
                            </span>
                        </div>
                    </div>

                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r" style="text-align: center;">
                            <thead>
                                <tr>
                                    <th width="10%" style="text-align: center;">标签ID</th>
                                    <th width="30%" style="text-align: center;">标签名</th>
                                    <th width="15%" style="text-align: center;">创建时间</th>
                                    <th width="15%" style="text-align: center;">修改时间</th>
                                    <th width="30%" style="text-align: center;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tagsList as $v)
                                <tr class="gradeX">
                                    <td class="del-id">{{$v['id']}}</td>
                                    <td>{{$v['name']}}</td>
                                    <td>{{$v['created_at']}}</td>
                                    <td>{{$v['updated_at']}}</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="{{ url("admin/tag") . '/' . $v['id'] . '/edit' }}">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del del-modal">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                
                                <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@section('footer-js')
   
<script type="text/javascript">

    // 新增按钮
    $('#create-tag').on('click', function() {

        $('#tag-submit').modal({

            relatedTarget: this,

            onConfirm: function(e) {
                
                //获取input标签的内容
                var tagName = $('input[name="tag-name"]').val();
                if ($.trim(tagName) == '') {
                    tipsDisplay('error', '标签名不能为空');
                    //清除input标签的内容
                    $('input[name="tag-name"]').val('');
                    return;
                } else if (tagName.length > 20) {

                }
                
                //ajax提交存入数据库
                $.ajax({

                    url : '{{ url('admin/tag') }}',
                    type : 'post',
                    data : '_token={{ csrf_token() }}&tagname=' + tagName,
                    dataType : 'json',

                    success : function (data) {

                        if (data.code == 200) {
                            // console.log(data.content);

                            var newContent = `<tr class="gradeX">
                                    <td class="del-id">` + data.content.id + `</td>
                                    <td>` + data.content.name + `</td>
                                    <td>` + data.content.created_at + `</td>
                                    <td>` + data.content.updated_at + `</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="{{ url("admin/tag")}}` + '/' + data.content.id + `/edit">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del del-modal">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>`;

                            $('tbody').append(newContent);

                            tipsDisplay('success', data.msg);

                            //删除空数据那一行
                            if ($('td.dataTables_empty')) {
                                $('td.dataTables_empty').parent().remove();
                            }

                        } else if (data.code == 400) {

                            tipsDisplay('error', data.msg);
                        }
                    },

                    error : function (data) {

                    }

                });

                //清除input标签的内容
                $('input[name="tag-name"]').val('');
            },

            onCancel: function(e) {
                
            }
        });
    });


    //删除按钮
    $('table').on('click', 'a.del-modal', function () {

        var that = $(this);

        $('#my-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
                
                // console.log(this);
                //获取要删除的ID
                var id = $(this.relatedTarget).parents('td').siblings('.del-id').html();
                var that = $(this.relatedTarget);
                console.log(that);
                console.log($(this.relatedTarget).parents('td'));
                console.log($(this.relatedTarget).parents('td').siblings('.del-id'));

                $.ajax({
                    type : 'delete',
                    url : '{{ url('admin/tag/') }}' + '/' + id,
                    data : '_token= {{ csrf_token() }} ',
                    dataType : 'json',
                    success : function (data) {
                        // console.log(data);
                        // console.log(data.msg);

                        if (data.code == 200) {
                            //删除成功
                            tipsDisplay('success', data.msg);
                            // console.log(that.parents('tr'));
                            that.parents('tr').remove();

                        } else if(data.code == 300 || data.code == 400) {
                            //删除失败
                            tipsDisplay('error', data.msg);
                        }
                    },

                    error : function (data) {

                    }

                });


            },
            // closeOnConfirm: false,
            onCancel: function() {
              
              
            }
        });

    });
    

</script>

@endsection